<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery.xablock.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/xablock.css"/>
        <link rel="stylesheet" href="css/demo.css"/>
        <script>
            var x1;
            var x2;
            var x3;
            var x4;
            $(function(){
                x1=$('#xablock1').xablock({'html':'i block - "disable this crap"'});
                x2=$('#xablock2').xablock({'html':'u can change this text/html'});
                x3=$('#xablock3').xablock({'html':'<img src="crybaby.png" width="50" height="50"/><br/>blocked'});
                x4=$('#xablock4').xablock({'html':'block'});
       
            })
        </script>
    </head>
    <body>

        <div id="xablock1" class="xablockDemo">
            I block :(
        </div>
        <div id="xablock2" class="xablockDemo">
            I block :(
        </div>
        <div id="xablock3" class="xablockDemo">
            I block :(
        </div>

        <div id="xablock4" class="xablockDemo">
            I block :(
        </div>
        <div class="blockHelper">
            <a href="#" onclick="x1.showOverlay();$('#xablock1').text('crap...');return false;">Enable</a> | 
            <a href="#" onclick="x1.hideOverlay();$('#xablock1').text('FREEDOM');return false;">Disable</a> |
            <a href="#" onclick="x1.destroyOverlay();$('#xablock1').text('Run,run,run');return false;">Destroy</a>
        </div>
        <div class="blockHelper">
            <a href="#" onclick="x2.changeHtml(Math.random());return false;">Change text/html</a>
        </div>
        <div class="blockHelper">
            custom html code
        </div>

        <div class="blockHelper">support normal corners</div>
    </body>
</html>
